<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
</head>

<body layadmin-themealias="default">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">新增主播</div>
                    <div class="layui-card-body" pad15="">
                        <div class="layui-form" wid150="" lay-filter="form">

                            <div class="layui-form-item">
                                <label class="layui-form-label">手机号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="mobile" value="" placeholder="请输入用户手机号（必填）"
                                        class="layui-input" lay-verify="required" style="width:400px" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">登陆密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" name="password" value="" placeholder="请输入登录密码（必填）"
                                        class="layui-input" lay-verify="required|password" style="width:400px" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="nick_name" value="" placeholder="请输入用户昵称（选填）"
                                        class="layui-input" lay-verify="" style="width:400px" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="gender" value="1" title="男" />
                                    <input type="radio" name="gender" value="2" title="女" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">头像</label>
                                <div class="layui-input-inline" style="width:130px">
                                    <div class="layui-upload">
                                        <div class="layui-upload-list" style="margin: 0px">
                                            <img class="layui-upload-img" id="demo1" width="100" height="100" />
                                            <p id="demoText"></p>
                                            <input type="hidden" name="avatar" id="LAY_avatarSrc" placeholder="图片地址"
                                                value="" class="layui-input" />
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                    <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatar">
                                        <i class="layui-icon">&#xe67c;</i>选择头像
                                    </button>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">归属经纪人</label>
                                <div class="layui-input-inline">
                                    <select name="guild_manager_id" lay-verify="required">
                                        <option value="0">请选择归属经纪人</option>
                                        {volist name="manager_list" id="item"}
                                        <option value="{$item.id}">{$item.real_name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="user-add">
                                        确认保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {include file='index/common' /}

    <script src="/layuiadmin/layui/layui.js"></script>
    <script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.min.js"></script>
    <script src="/assets/ue/third-party/jquery-1.10.2.js"></script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
            , version: "{:config('other.ui_version')}"
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(["index", "guild/user", "laytpl", "upload", "element"], function () {
            var upload = layui.upload;
            var element = layui.element,
                laytpl = layui.laytpl,
                form = layui.form;

            form.verify({
                password: function (value) {
                    if (value.length < 6) {
                        return "密码长度至少为6位";
                    }
                },
            });

            var avatarSrc = $("#LAY_avatarSrc");
            //常规使用 - 普通图片上传
            var choosefile;
            var uploadInst = upload.render({
                elem: "#LAY_avatar",
                url: "{:url('index/signForCos')}", //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        choosefile = file;
                        $("#demo1").attr("src", result); //图片链接（base64）
                    });

                    element.progress("demo", "0%"); //进度条复位
                    layer.msg("上传中", { icon: 16, time: 0 });
                },
                done: function (res) {
                    //如果上传失败
                    if (res.code == 0) {
                        var cos = new COS({
                            getAuthorization: function (options, callback) {
                                var credentials = res.data.credentials;
                                callback({
                                    TmpSecretId: credentials.tmpSecretId,
                                    TmpSecretKey: credentials.tmpSecretKey,
                                    XCosSecurityToken: credentials.sessionToken,
                                    ExpiredTime: res.data.expiredTime,
                                });
                            },
                            Domain:res.data.imgDomain,
                        });
                        cos.putObject(
                            {
                                Bucket: res.data.bucket,
                                Region: res.data.region,
                                Key: "images/" + res.data.filename + choosefile.name,
                                Body: choosefile,
                            },
                            function (err, data) {
                                layer.closeAll("loading");
                                if (err) {
                                    layer.msg("上传失败", { icon: 5 });
                                } else {
                                    if (data.statusCode == 200) {
                                        avatarSrc.val("https://" + data.Location);
                                        layer.msg("上传完毕", { icon: 1 });
                                    } else {
                                        layer.msg("图片上传失败", { icon: 5 });
                                    }
                                }
                            }
                        );
                    } else {
                        layer.closeAll("loading");
                        layer.msg(res.msg, { icon: 5 });
                    }
                    //上传成功的一些操作
                    //……
                    $("#demoText").html(""); //置空上传失败的状态
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $("#demoText");
                    demoText.html(
                        '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
                    );
                    demoText.find(".demo-reload").on("click", function () {
                        uploadInst.upload();
                    });
                },

            });
        });

    </script>
</body>

</html>